<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/3/7 0007
  Time: 14:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>订单</title>
    <jsp:include page="../base.jsp"/>

    <!-- bootstrap-表格搭建 -->
    <link rel="stylesheet" href="${requestScope.webRoot}static/bootstrap/table/bootstrap-table.min.css">
    <script src="${requestScope.webRoot}static/bootstrap/table/bootstrap-table.min.js" ></script>
    <script src="${requestScope.webRoot}static/bootstrap/table/locale/bootstrap-table-zh-CN.min.js" ></script>

    <link rel="stylesheet" href="${requestScope.webRoot}static/css/theme.css">
    <script src="${requestScope.webRoot}static/js/control/modal/hintModal.js"></script>
    <script src="${requestScope.webRoot}static/js/control/table/OrdersTable.js"></script>
    <script src="${requestScope.webRoot}static/js/control/modal/OrdersParticularsModal.js"></script>
</head>
<body>

<jsp:include page="../leftTheBorder.jsp">
    <jsp:param name="level1Menu" value="food"/>
    <jsp:param name="level2Menu" value="orders"/>
</jsp:include>
<div class="mainContent">
    <div class="segmentation-1">订单表</div>
    <div class="bootstrap-table-div" data-userId="${sessionScope.user.id}" style="min-width: 700px"></div>
</div>

<div class="modal fade modalPanel" tabindex="-1" id="ordersParticularsModal">
    <div class="modal-dialog" style="width: 400px;">
        <div class="modal-content">
            <table class="table table-bordered" width="360px">
                <tr>
                    <td style="text-align: center; font-size: 18px"><label class="userName"></label></td>
                    <td style="text-align: center; font-size: 18px"><label class="state"></label></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <table class="orderfo smallTable table table-bordered" width="300">
                            <caption>食品列表</caption>
                            <thead>
                            <tr>
                                <th>名称</th>
                                <%--<th>单价</th>--%>
                                <th>数量</th>
                            </tr>
                            </thead>
                            <tbody class="pre-scrollable">
                            </tbody>
                        </table>
                        <div style="text-align: right;font-size: 8px; margin-right: 10px">
                            总价: <label class="totalPrices" style="margin-left: 5px;"></label>元
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
<script>
    $(function () {
        window.tableObject =  new OrdersTable($(".bootstrap-table-div"));
        tableObject.ordersParticularsModal = new OrdersParticularsModal($("#ordersParticularsModal"));
    });
</script>
</body>
</html>
